<!-- 用户管理角色管理 -->
<template>
  <div class="page_content">
    <div class="tab">
        <el-table @selection-change="handleSelectionChange" ref="multipleTableRef" size='small' :highlight-current-row="true" :data="tableData" border style="width: 100%">
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip/>
            <el-table-column prop="organization" label="所属组织" show-overflow-tooltip/>
            <el-table-column prop="menu" label="菜单权限" show-overflow-tooltip/>
            <el-table-column prop="dataPermission" label="数据访问权限" show-overflow-tooltip/>
            <el-table-column prop="roleRemark" label="角色描述" show-overflow-tooltip/>
            <el-table-column align="center">
                <template #header>
                    <div class="tab-flex">
                        <span>操作</span>
                    </div>
                </template>
                <template #default="scope">
                <el-button size="small" type="text" @click="editForm = JSON.parse(JSON.stringify(scope.row)), editDrawer = true">修改</el-button>
                <el-button size="small" type="text" @click="delRoleEvt(scope.row)">删除</el-button>
                </template>
          </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <paging url="/login" method="post"></paging>

    <!-- 新增修改组织弹窗 -->
    <el-drawer
      style="padding-bottom: 0;"
      v-model="editDrawer"
      :title="`${editForm.id ? '修改' : '新增'}组织`"
      direction="rtl"
      size="600px"
    >
      <el-form
        ref="editForms"
        :rules="editRules"
        :model="editForm"
        label-width="auto"
        label-position="top"
      >
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="editForm.contacts" placeholder="请输入角色名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="所属组织" prop="name">
            <el-input v-model="editForm.name"  placeholder="请输入所属组织" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="菜单权限" prop="name">
            <SearchAAndTree :isSelectAll="false" @multipleChange="menuMutipleEvt" @searchEvt="menuSearchEvt" :multiple="false" :treeData="dataSource" :width="244" trigger="click">
              <el-input v-model="editForm.name" readonly placeholder="请输入菜单权限" clearable/>
            </SearchAAndTree>
          </el-form-item>
        </el-col>
        <el-col :span="12"><div/>
          <el-form-item label="访问数据权限" prop="name">
            <el-input v-model="editForm.name" placeholder="请输入访问数据权限" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="24"><div/>
          <el-form-item label="角色描述">
            <el-input  placeholder="请输入角色描述" :autosize="{ minRows: 3, maxRows: 8 }" type="textarea" v-model="editForm.name"/>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>

      <!-- 自定义叶尾 -->
      <template #footer>
        <el-button @click="editDrawer = false">
          取消
        </el-button>
        <el-button type="primary">
          保存
        </el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import paging from '@/components/paging.vue';
import SearchAAndTree from '../../../components/searchAndTree.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dataSource = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])

// 表格多选数据
const tableSelectList = ref([])

// 表格多选
const handleSelectionChange = (e) => {
    tableSelectList.value = e
}
// 表格数据
const tableData = Array.from({length: 20}, (_, index) => ({  
  id: index + 1,  
  roleName: '堰华路专用充电站' + index,
  organization: "都江堰市都经交投运输有限公司" + index,
  menu: '充电概况,充电云概览' + index,
  dataPermission: '都经交投堰华路专用充电站' + index,
  roleRemark: '仅都江堰兴堰投资有限公' + index,
}))

// 菜单权限tree关键字查询
const menuSearchEvt = (e) => {
    console.log(e)
}

// 菜单权限tree多选变化
const  menuMutipleEvt = (arr) => {
    console.log(arr)
}

// 新增修改角色抽屉
const editDrawer:boolean = ref(false)

// 新增修改角色表单
const editForms = ref(null)

// 新增修改角色
const editForm = ref({})

// 新增修改角色表单校验
const editRules = {
    name: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
    ]
}

// 监听新增修改角色抽屉
watch(
    editDrawer,
    (e) => {
        if(!e) {
            editForms.value.resetFields()
        }
    }
)        


// 删除角色
const delRoleEvt = (row) => {
    ElMessageBox.confirm(
        '确认删除此角色?',
        'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {})
}
</script>

<style scoped lang="scss">
.page_content{
  width: 100%;
  height: 100%;
}

::v-deep .el-drawer__header {
  margin-bottom: 0;
}
</style>
